<template>
	<div>
		<div class="mpvue-cropper">
			<image-cropper id="image-cropper" :limit_move="true" :disable_rotate="true" :width="width" :height="height"
				:imgSrc="src" @load="cropperload" @imageload="loadimage" @tapcut="clickcut">
			</image-cropper>
		</div>

		<div class="cropper-bottom">
			<div class="cropper-buttons">
				<div class="upload btn" @tap="uploadTap">
					重新选择
				</div>
				<div class="getCropperImage btn" @tap="getCropperImage">
					确定
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {

		data() {
			return {
				images: config.images,
				localImages: config.localImages,

				src: '', //原始图片地址
				width: 260, //宽度
				height: 360, //高度
				type: 0, //类型：0返回图片地址，1调用人脸上传接口
			}
		},
		onLoad(options) {
			this.src = options.src || ''
			if (options.type) {
				this.type = options.type
			}
			this.cropper = this.selectComponent("#image-cropper");
			console.log('this.cropper', this.cropper)
		},
		methods: {
			cropperload(e) {
				console.log("cropper初始化完成");
			},
			loadimage(e) {
				console.log("图片加载完成", e.detail);
				wx.hideLoading();
				//重置图片角度、缩放、位置
				this.cropper.imgReset();
			},
			clickcut(e) {
				console.log(e.detail);
				//点击裁剪框阅览图片
				// wx.previewImage({
				// 	current: e.detail.url, // 当前显示图片的http链接
				// 	urls: [e.detail.url] // 需要预览的图片http链接列表
				// })
			},

			uploadTap() {
				console.log('uploadTap')
				this.cropper.upload()
			},

			getCropperImage() {
				var self = this;
				this.cropper.getImg((detail) => {
					console.log(detail)
					//裁剪完成，进行上传图片的操作
					wx.showLoading({
						title: '',
						mask: true,
						duration: 800
					})
					util.uploadFile(detail.url).then((res) => {
						var param = res;
						var params = {
							faceSwitch: 1,
							faceUrl: param.filePath,
						}
						self.faceSwitch(params);
					})

				})
			},

			//人脸开门
			async faceSwitch(params, type = 0) {
				var url = '/UserServer/owner/info/faceSwitch?'
				var paramUrl = util.stringifyQs(params)
				url = url + paramUrl
				var options = {
					url,
					params: {},
					method: 'PUT',
				}
				var param = await util.requestPro(options)
				console.log('faceSwitch', param)
				wx.showToast({
					title: "图片上传成功",
					icon: 'none'
				});
				setTimeout(() => {
					wx.navigateBack()
				}, 400)
			},

		},

	}
</script>

<style scoped>
	/* 包裹的样式不能修改组件image-cropper的大小 */
	.mpvue-cropper {
		width: 750rpx;
		height: 880rpx;
		margin-top: -120rpx;
		/* background-color: red; */
		/* background-color: rgba(0, 0, 0); */
	}


	.cropper-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 0rpx;
		/* background-color: blue; */
		z-index: 999999 !important;

	}

	.cropper-buttons {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		left: 0;
		height: 110rpx;
		line-height: 110rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.95);
		text-align: center;
		/* border: 1rpx solid red; */
	}

	.getCropperImage {
		background-color: #04b00f;
	}

	.cropper {
		position: absolute;
		top: 0;
		left: 0;
	}

	.btn {
		position: relative;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border-radius: 4rpx;
		color: #ffffff;
		font-size: 30rpx;
	}

	.btn::after {
		position: absolute;
		content: '';
		top: -32rpx;
		right: -20rpx;
		bottom: -20rpx;
		left: -32rpx;
		border: 1rpx solid transparent;
	}
</style>
